<template>
  <div>
    <el-drawer
        :visible.sync="recordDrawer"
        :withHeader="false"
        size="50%"
        @close="onCloseRecordDrawer"
        @open="onOpenRecordDrawer"
    >
      <h1 style="padding: 10px;">操作记录</h1>
      <div style="margin:10px">
        <Pagination
            ref="pagination"
            :queryPage="loadRecordTable"
        >
          <div slot="search">
            <el-form
                :inline="true"
                size="mini"
            >
              <el-form-item>
                <el-button
                    type="primary"
                    @click="$refs.pagination.go(1);"
                >查询
                </el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table
              slot="table"
              :data="recordTable"
              border
              size="mini"
              style="width: 100%;"
          >
            <el-table-column
                fixed
                label="#ID"
                prop="id"
                width="80"
            >
            </el-table-column>
            <el-table-column
                label="类型"
                prop="deployType.name"
                width="100"
            >
            </el-table-column>
            <el-table-column
                label="结果"
                prop="success"
                width="100"
            >
              <template slot-scope="scope">
                <el-tag
                    v-if="scope.row.success==null"
                    size="mini"
                    type="warning"
                >执行中
                </el-tag>
                <el-tag
                    v-else-if="scope.row.success"
                    size="mini"
                    type="success"
                >成功
                </el-tag>
                <el-tag
                    v-else
                    size="mini"
                    type="danger"
                >失败
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
                label="开始时间"
                prop="beginTime"
            >
            </el-table-column>
            <el-table-column
                label="结束时间"
                prop="endTime"
            >
            </el-table-column>

            <el-table-column
                label="操作人"
                prop="operatorName"
            >
            </el-table-column>

            <el-table-column
                label="操作"
                width="100"
            >
              <template slot-scope="scope">
                <el-button
                    size="small"
                    type="text"
                    @click="showRecordDetail(scope.row.id)"
                >日志
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </Pagination>
      </div>
    </el-drawer>

    <el-dialog
        id="recordDetail"
        :visible.sync="recordDetailVisible"
        title="记录日志"
    >

      <ConsoleLog :logLines="logLines"/>
    </el-dialog>

  </div>

</template>
<script>
import {getRecordDetailApi, queryRecordPageApi} from "@/api/deploy";

import Pagination from "@/components/Pagination";
import ConsoleLog from "@/components/ConsoleLog";

export default {
  data() {
    return {
      recordInstanceId: null,
      recordDrawer: false,
      recordTable: [],
      recordDetailVisible: false,
      recordDetail: {},
      logLines: [],
    };
  },
  components: {
    Pagination,
    ConsoleLog,
  },
  methods: {
    openRecord(instanceId) {
      this.recordInstanceId = instanceId;
      this.recordDrawer = true;
    },
    onOpenRecordDrawer() {
      if (this.$refs.pagination) {
        this.$refs.pagination.go(1);
      }
    },
    onCloseRecordDrawer() {
      this.recordTable = [];
      this.logLines = [];
      this.recordInstanceId = null;
    },
    async loadRecordTable(current, size) {
      let data = await queryRecordPageApi({
        size: size,
        current: current,
        instanceId: this.recordInstanceId,
      });
      this.recordTable = data.records;
      return data;
    },
    async showRecordDetail(id) {
      this.logLines = [];
      this.recordDetail = await getRecordDetailApi(id);
      this.recordDetailVisible = true;
      this.logLines = this.recordDetail.msgText.split(/\n/);
    },
  },
};
</script>
<style scoped>
#recordDetail /deep/ .el-dialog__body {
  padding: 5px;
}
</style>